<template>
	<view>
		<swiper class="box" :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
			<template v-for="item in bannerimg">
				<swiper-item  v-if="item.show" :key=item._id>
					<image :src="item.imagePath" mode="" class="bannerimg"></image>
				</swiper-item>
			</template>
		</swiper>
		<scroll-view class="nav-box" enable-flex scroll-x="true">
			<view class="nav" v-for="item in navData" :key=item._id @click=getData(item.title)>
				<image class="nav-img" :src="item.iconPath" mode=""></image>
				<view class="title">
					{{item.title}}
				</view>
			</view>
		</scroll-view>
		<view class="content">
			<view class="top">
				<view class="movie-title">
					影院热映
				</view>
				<view class="more">
					查看更多
				</view>
			</view>
			<scroll-view class="bottom" scroll-x="true" enable-flex>
				<view class="movie">
					<image class="movieimg" src="" mode=""></image>
					<view class="moviename">
						夏日晴天
					</view>
				</view>
				<view class="movie">
					<image class="movieimg" src="" mode=""></image>
					<view class="moviename">
						夏日晴天
					</view>
				</view>
				<view class="movie">
					<image class="movieimg" src="" mode=""></image>
					<view class="moviename">
						夏日晴天
					</view>
				</view>
				<view class="movie">
					<image class="movieimg" src="" mode=""></image>
					<view class="moviename">
						夏日晴天
					</view>
				</view>
				<view class="movie">
					<image class="movieimg" src="" mode=""></image>
					<view class="moviename">
						夏日晴天
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bannerimg:[],
				navData:[]
			}
		},
		created(){
			this.getbannerimg();
			this.getNavData();
		},
		methods: {
			async getbannerimg(){
				const data = await this.$api.home.getbannerimg();
				if(data.code){
					this.bannerimg = data.result.rows;
				}
			},
			async getNavData(){
				const data = await this.$api.home.getNavData();
				if(data.code){
					this.navData = data.result.rows;
				}
				console.log(this.navData);
			},
			getData(name){
				this[name]();
			},
			影片(){
				uni.navigateTo({
					url:'../list/list'
				})
			},
			影院(){
				uni.navigateTo({
					url:'../map/map'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.box{
	height: 180px;
}
.bannerimg{
	width: 100%;
	height: 100%;
}
.nav{
	width: 65px;
	height: 80px;
	margin: 10px;
	flex-shrink: 0;
	text-align: center;
}
.nav-box{
	display: flex;
	height: 100px;
	padding: 8px 20px;
	box-sizing: border-box;
}
.nav-img{
	width: 60%;
	height: 55%;
}
.content{
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
}
.top{
	display: flex;
	margin-bottom: 20px;
	justify-content: space-between;
}
.more,.movie-title{
	color: #666dc3;
	font-weight: bold;
}
.bottom{
	display: flex;
	height: 142px;
	/* justify-content: space-between; */
}
.movie{
	width: 22%;
	flex-shrink: 0;
	/* box-sizing: border-box; */
	margin-right: 12px;
	/* text-align: left; */
}
.movieimg{
	height: 110px;
	width: 100%;
	border-radius: 4px;
	border: 1px solid red;
}
</style>
